<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美味餐厅点餐系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <div class="container">
        <!-- <header>
            <h1><i class="fas fa-utensils"></i> 美味餐厅点餐系统</h1>
            <p>点击右侧菜单添加到您的订单</p>
        </header> -->
        
        <div class="content">
            <div class="order-panel">
                <h2 id="orderTitle"><i class="fas fa-receipt"></i> 我的订单</h2>
                
                <div class="order-items" id="orderItems">
                    <div class="empty-order">
                        <svg class="basket-icon" viewBox="0 0 24 24" width="48" height="48">
                            <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
                        </svg>
                        <p>您的订单是空的<br>请从右侧菜单选择菜品</p>
                    </div>
                </div>
                
                <div class="order-summary">
                    <div class="summary-row">
                        <span>菜品数量:</span>
                        <span id="itemCount">0</span>
                    </div>
                    <div class="summary-row">
                        <span>菜品总价:</span>
                        <span id="subtotal">¥0.00</span>
                    </div>
                    
                    <div class="checkout-buttons">
                        <button class="checkout-btn clear-btn">
                            <i class="fas fa-trash"></i> 清空
                        </button>
                        <button class="checkout-btn print-btn">
                            <i class="fas fa-print"></i> 打印
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="menu-panel">
                <h2 class="menu-header">
                    <i class="fas fa-book"></i> 餐厅菜单
                    <a href="admin.html" class="admin-gear" target="_blank">
                        <svg t="1752150902363" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5389" width="30" height="30"><path d="M1014.491429 411.318857a30.646857 30.646857 0 0 0-0.768-5.12v-0.950857l-0.475429-2.633143c-8.118857-41.947429-34.267429-68.937143-66.816-68.937143h-5.376c-55.515429 0-100.534857-47.981714-100.534857-106.642285 0-13.531429 5.961143-32.841143 8.448-39.606858 15.762286-39.021714-1.024-83.492571-39.972572-106.130285L686.445714 7.753143l-2.304-0.841143c-9.142857-3.145143-19.748571-6.912-31.634285-6.912-22.162286 0-47.067429 10.898286-62.500572 27.245714-19.309714 20.260571-58.477714 50.432-81.773714 50.432-23.186286 0-62.500571-30.061714-81.810286-50.432A87.149714 87.149714 0 0 0 363.958857 0c-12.251429 0-22.528 3.657143-31.670857 6.912L330.24 7.753143 201.728 81.554286l-0.804571 0.475428c-31.158857 20.699429-43.885714 68.205714-27.977143 105.874286l0.219428 0.475429 0.256 0.512c2.486857 5.924571 10.24 26.038857 10.24 43.593142 0 58.88-45.202286 106.642286-100.498285 106.642286h-5.376C43.776 339.126857 18.285714 365.714286 10.971429 408.502857l-0.475429 2.413714v0.841143c0 1.206857-0.438857 2.925714-0.768 5.12C6.838857 435.2 0 478.281143 0 513.536c0 35.254857 6.729143 78.372571 9.728 96.694857 0.219429 2.194286 0.438857 3.986286 0.768 5.083429v0.950857l0.475429 2.669714c8.118857 41.910857 34.267429 68.937143 66.816 68.937143h2.742857c55.515429 0 100.534857 47.981714 100.534857 106.642286 0 13.531429-5.961143 32.804571-8.448 39.606857-15.213714 36.717714-0.804571 83.821714 32.768 107.593143l0.914286 0.475428 121.088 71.460572 2.304 0.877714c9.142857 3.145143 19.529143 6.875429 31.414857 6.875429 25.344 0 48.201143-10.276571 62.464-27.245715 1.389714-1.097143 2.742857-2.56 4.352-4.022857 14.628571-13.531429 53.906286-49.371429 79.835428-49.371428 19.309714 0 51.638857 21.394286 84.187429 55.954285 16.457143 17.188571 39.204571 27.245714 62.500571 27.245715 15.762286 0 27.428571-4.608 40.667429-11.52l0.438857-0.219429 124.196571-72.813714 0.438858-0.512c31.195429-20.699429 43.885714-68.205714 28.013714-105.874286l-0.256-0.475429-0.219429-0.512c-0.219429-0.109714-9.947429-21.577143-8.118857-40.813714l0.219429-1.206857v-1.206857c0-58.88 45.238857-106.605714 100.571428-106.605714h5.668572c34.048 0 59.538286-26.697143 66.852571-69.449143l0.438857-2.413715v-0.841142c0.219429-0.987429 0.475429-2.413714 0.804572-4.388572 2.962286-17.773714 9.837714-59.355429 9.837714-97.389714 0.219429-35.108571-6.509714-78.153143-9.508571-96.438857z m-502.601143 269.458286c-87.844571 0-159.012571-75.483429-159.012572-168.667429 0-93.147429 71.168-168.630857 159.012572-168.630857s159.012571 75.483429 159.012571 168.630857c0 93.184-71.168 168.667429-159.012571 168.667429z" fill="#4dabf7" p-id="5390"></path></svg>
                    </a>
                </h2>
                
                <div class="menu-categories">
                    <!-- 分类按钮将通过JavaScript动态生成 -->
                </div>
                
                <div class="menu-items" id="menuItems">
                    <!-- 菜单项将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
    </div>

    <script src="./js/index.js"></script>
</body>
</html>